<template>
	<view class="fl-box">
		<view class="top">
			<view>购物数量<span style="color: red;">{{car_list.length}}</span></view>
			<view v-if='car_list.length'>
				<button class="topBtn" @click="changeGlStatus()" v-if="GlStatus">管理</button>
				<button class="topBtn" @click="changeGlStatus()" v-else>取消</button>
			</view>
		</view>
		<view class="mainbody">
			<view
				style="padding: 110rpx 0 100rpx 0;height: 100%;overflow-y:scroll;display: flex;flex-direction: column;box-sizing: border-box;">

				<view style="flex: 1;overflow-y: scroll;">
					<view class="main" v-for="item,index in car_list" :key="item._id" v-if="car_list.length">
						<view @click="changeCheckout(index)" style="margin:0 40rpx 0 0rpx;">
							<view class="checkoutbtn" v-if="item.is_checkout">
								<u-icon name="checkmark" color="white"></u-icon>
							</view>
							<view class="uncheckoutbtn" v-else>
							</view>
						</view>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<image class="image" :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="product-right">
								<view class="product-right-left">
									<view class="over-hide">{{item.title}}</view>
									<view class="kucun">库存：{{item.inventory}}</view>
									<view class="price"><span style="font-size: 38rpx;">￥</span>{{item.price}}</view>
								</view>
								<u-number-box v-model="item.number" @change="updateNumber" :name="item._id +','+ item.merchandise_id + ',' + item.number" :max="item.inventory"></u-number-box>
							</view>
						</view>
					</view>
					<view v-if="car_list.length<=0" style="padding-top: 300rpx;box-sizing: border-box;">
						<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text="购物车暂无商品~">
						</u-empty>
					</view>
				</view>
			</view>
		</view>


		<view class="bottom" v-if="car_list.length">
			<view @click="changeAllCheckout">
				<view style="display: flex;align-items: center;">
					<view v-if="is_all_checkout" class="checkoutbtn">
						<u-icon name="checkmark" color="white"></u-icon>
					</view>
					<view v-else class="uncheckoutbtn">
					</view>
					<span style="margin-left: 20rpx;">全选<span v-if="checkout_number >0">({{checkout_number}})</span></span>
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;" v-if="GlStatus">
				<view><span style="color: red;">￥{{(price).toFixed(2)}}</span></view>
				<button style="
				margin-left: 30rpx; 
				border-radius: 50rpx; 
				width: 200rpx;font-size: 25rpx;
				color: #FFFFFF;
				background-color: #E93323;" @click="goOrder">立即下单</button>
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;" v-else>
				<button style="
				border: 1px #999999 solid;
				color: #999999;
				margin-left: 30rpx; 
				border-radius: 50rpx; 
				width: 200rpx;
				font-size: 25rpx;
				background-color: #FFFFFF;" @click="delShopCarByIdList">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			price() {
				const price = this.car_list.reduce((per, cur) => {
					if (cur.is_checkout) {
						return per + cur.price * cur.number
					} else {
						return per
					}

				}, 0)
				return price
			},
			is_all_checkout() {
				return this.car_list.length > 0 && this.car_list.every(item => item.is_checkout)
			},
			checkout_number() {
				console.log("无法")
				return this.car_list.reduce((per, cur) => {
					return cur.is_checkout ? per + 1 : per;
				}, 0);
			}
		},
		onShow() {
			this.getShopCartData()
		},
		data() {
			return {
				car_list: [],
				nima: [],
				GlStatus: true,
				timer:null
			}
		},
		methods: {
			goOrder(){
				if(this.checkout_number < 1){
					 uni.showToast({title:"请选择商品后下单",icon:"none"})
					return
				}
				let select_list = this.car_list.filter(elem => {
					return elem.is_checkout
				}).map((item) => {
					return item._id
				})
				
				let product_id = encodeURIComponent(select_list.join(','))
				console.log('转码后的结果',product_id)
				uni.navigateTo({
					url:`/pages/order/order?type=car&product_id=${product_id}`,
					
				})
			},
			async updateNumber({value,name}){
				// console.log('name',name)
				
				if(this.timer) clearTimeout(this.timer)
				
				this.timer = setTimeout(async()=>{
					let car_id = name.split(',')[0]
					let merchandise_id = name.split(',')[1]
					let car_inventory = Number(name.split(',')[2])
					const res = await vk.callFunction({
						url: '/client/pages/shopcart/kh/shopcart_update',
						title: '请求中...',
						data: {
							car_id:car_id,
							number:value,
							car_inventory:car_inventory,
							merchandise_id:merchandise_id
						},
						success: (data) => {
							
						}
					});
					clearTimeout(this.timer)
					this.timer = null
				},1000)
				
				// console.log(res)
			},
			changeCheckout(index) {
				this.car_list[index].is_checkout = !this.car_list[index].is_checkout
			},
			checkboxChange(n) {},
			changeAllCheckout() {
				if (this.is_all_checkout) {
					this.car_list.forEach((item, index, obj) => {
						obj[index].is_checkout = false
					})
				} else {
					this.car_list.forEach((item, index, obj) => {
						obj[index].is_checkout = true
					})
				}
			},
			changeGlStatus() {
				this.GlStatus = !this.GlStatus
			},
			async getShopCartData() {
				// this.car_list = []
				let res = await vk.callFunction({
					url: 'client/pages/shopcart/kh/shopcart_list',
					title: "加载中.."
				});
				res.data.forEach((item, index, obj) => {
					item.is_checkout = true
				})
				this.car_list = res.data
			},
			async delShopCarByIdList() {
				let del_list = this.car_list.filter(elem => {
					return elem.is_checkout
				}).map((item) => {
					return item._id
				})

				if (vk.pubfn.isNull(del_list)) {
					uni.showToast({
						title: "请选择操作商品",
						icon: 'none'
					})
					return
				}
				let res = await vk.callFunction({
					url: 'client/pages/shopcart/kh/shopcart_delete',
					title: "删除中...",
					data: {
						del_list: del_list
					}
				})
				
				uni.showToast({
					title:'删除成功',
					icon:'none'
				})
				console.log('res', res)
				this.getShopCartData()
			}
		}
	}
</script>

<style lang="less" scoped>
	.fl-box {
		position: absolute;
		width: 100%;
		height: 100%;
		// padding: 20rpx 0 0rpx 0;
		box-sizing: border-box;
	}

	.top {
		height: 70rpx;
		background-color: white;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.topBtn {
			width: 150rpx;
			font-size: 25rpx;
		}
	}

	.mainbody {
		height: 100%;
		background-color: #F5F5F5;

		.main {
			margin-bottom: 15rpx;
			padding: 20rpx;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: flex-start;



			.image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 5rpx;
				margin-right: 20rpx;
			}


			.product-right {
				height: 160rpx;
				display: flex;

				.product-right-left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.over-hide {
						font-size: 32rpx;
						width: 250rpx; //宽度

						overflow: hidden; //超出文本隐藏

						text-overflow: ellipsis; ///超出部分省略号显示

						display: -webkit-box; //弹性盒模型

						-webkit-box-orient: vertical; //上下垂直

						-webkit-line-clamp: 2; //自定义行数
					}

					.kucun {
						height: 50rpx;
						font-size: 24rpx;
						color: #b0b0b0;
					}

					.price {
						color: #E93323;
						font-size: 32rpx;
					}
				}


			}

		}
	}

	.bottom {
		z-index: 999;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		background-color: white;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.checkout-fill {
			width: 50rpx;
			height: 50rpx;
			background-color: red;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.checkout-kong {
			border: 2px solid red;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			box-sizing: border-box;
		}
	}

	.checkoutbtn {
		width: 40rpx;
		height: 40rpx;
		background-color: #E93323;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uncheckoutbtn {
		border: 2px solid #E93323;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		box-sizing: border-box;
	}
</style>
